<template>
	<div class="main">
		<div class="history">
			<ul class="title">
				<li>检测时间</li>
				<li>状态</li>
			</ul>
			<ul class="filter">
				<li @click="showStatus = false,showDate = !showDate">日期筛选<i class="fa fa-caret-down"></i></li>
				<li @click="showDate = false,showStatus = !showStatus">{{value_status}}<i class="fa fa-caret-down"></i></li>
			</ul>
			<!-- 选择时间 -->
			<div class="date" v-if="showDate">
				<div class="form">
					<label>选择时间</label>
					<span @click="dialog_start = true,dialog_n = 1" v-if="data_start">{{data_start}}</span>
					<span @click="dialog_start = true,dialog_n = 1" v-if="data_start == ''">开始时间</span>
					<i>-</i>
					<span @click="dialog_start = true,dialog_n = 2" v-if="data_end">{{data_end}}</span>
					<span @click="dialog_start = true,dialog_n = 2" v-if="data_end == ''">结束时间</span>
				</div>
				<div class="submit">
					<button class="reset" @click="showDate = false">取消</button>
					<button class="finsh" @click="timerFinsh()">完成</button>
				</div>
			</div>
			<!-- 选择状态 -->
			<div class="status" v-if="showStatus">
				<li 
					v-for="(item,index) in list_status" 
					:key="item" 
					:class="{'active':index == n_status}"
					@click="n_status = index,showStatus = false,value_status = item,list()">{{item}}
				</li>
			</div>
			<!-- list -->
			<ul class="list" v-if="formData.length>0">
				<li v-for="item in formData" :key="item.hege" @click="toDetail(item.collection_uid)">
					<div class="left">{{common.toDate(item.create_time)}}</div>
					<div class="right">
						<span class="btn green" v-if="item.hege == '合格'">{{item.hege}}</span>
						<span class="btn red" v-else>{{item.hege}}</span>
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
			</ul>
			<p class="none" v-else>暂无数据</p>
		</div>
		<!-- 时间弹窗 -->
		<van-actionsheet v-model="dialog_start">
			<van-datetime-picker
				v-model="value_start"
				type="date"
				@cancel="dialog_start = false"
                @confirm="okStart"
				:formatter="common.formatter"/>
		</van-actionsheet>
	</div>
</template>
<script>
import { Toast } from 'vant';
export default {
	data () {
		return {
			showDate:false, //是否显示时间选择器
			showStatus:false, //是否显示状态
			list_status:['全部','合格','不合格'],
			value_status:"全部",
			n_status:0, //0全部,1合格,2不合格
			
			//弹窗
			dialog_n:1,  //1开始时间，2结束时间
			dialog_start:false, //开始时间 - 弹窗
			
			//时间
			value_start:new Date(),  
			data_start:"",
			data_end:"",
			
			//表单
			formData:[],
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/visHistory',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
					//studentUid:'725a5ea6097811e99c936045cb8a6621',
					pageNum:0,
					pageSize:0,
					stratTime:this.data_start,
					endTime:this.data_end,
					status:this.value_status == '全部'?'':this.value_status,
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					this.formData = res.data.data.list;
				}
			})
		},
		//跳到详情页
		toDetail:function(id){
			this.$router.push({
				path:'/eye',
				query:{
					id:id
				}
			})
		},
		//开始时间 - 确定
		okStart:function(){
			//开始时间
			if(this.dialog_n == 1){
				this.dialog_start = false;
				this.data_start = this.common.formatDateTime(this.value_start);
			}
			//结束时间
			else{
				this.dialog_start = false;
				this.data_end = this.common.formatDateTime(this.value_start);
			}
		},
		//时间点完成
		timerFinsh:function(){
			if(this.common.checkTimer(this.data_start,this.data_end)){
				this.showDate = false;
				this.list(); 
			}
			else{
				Toast('开始时间不能大于结束时间');
			}
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "历史数据";
	}
}
</script>

<style lang="scss" scoped>
	//选择时间
	.date{
		padding: 15px;
		.form{
			display: flex;
			align-items: center;
			padding-bottom: 15px;
			label{
				width: 120px;
				text-align: center;
			}
			span{
				display: inline-block;
				width: 1.3rem;
				color: #999;
				border: 1px solid #eee;
				padding: 4px;
				text-align: center;
				font-size: 14px;
			}
			i{
				margin: 0 4px;
				color: #999;
			}
		}
	}
	//选择状态
	.status{
		padding: 5px 30px;
		li{
			text-align: center;
			padding: 10px 0;
			color: #666;
		}
		.active{
			font-weight: bold;
			color: #00CC00;
		}
	}
	.submit{
		border-top: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 15px;
		button{
			width: 48%;
			padding: 10px 0;
			border-radius: 3px;
		}
		.reset{
			background-color: #F4F4F4;
		}
		.finsh{
			background-color: #0DCF27;
			color: #fff;
		}
	}
	.history{
		margin: 15px;
		padding: 15px 0;
		background-color: #fff;
		box-shadow:0 0 5px #ccc;
		border-radius: 6px;
		.title{
			display: flex;
			border-bottom: 1px solid #eee;
			padding-bottom: 15px;
			li{
				font-weight: bold;
				width: 50%;
				text-align: center;
			}
		}
		.filter{
			display: flex;
			padding: 10px 0;
			border-bottom: 1px solid #eee;
			li{
				width: 50%;
				text-align: center;
				color: #999;
				i{
					margin-left: 4px;
				}
			}
		}
		.list li{
			display: flex;
			align-items: center;
			position: relative;
			padding: 10px 0;
			position: relative;
			.left{
				width: 50%;
				text-align: center;
			}
			.right{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				text-align: right;
				.btn{
					width: 70px;
					text-align: center;
				}
				i{
					color: #999;
					margin-left: 10px;
					font-size: 20px;
				}
			}
			.btn{
				padding: 6px 0;
				border-radius: 6px;
				color: #fff;
				font-size: 14px;
			}
			.green{
				background-color: #00CC00;
			}
			.red{
				background-color: #FF4D4D;
			}
		}
		.list li:after{
			content: '';
			position: absolute;
			left: 20px;
			right: 20px;
			bottom: 0;
			border-bottom: 1px solid #eee;
		}
		.list li:after{
			content: '';
			position: absolute;
			left: 15px;
			right: 0;
			bottom: 0;
			border-bottom: 1px solid #eee;
		}
		.list li:last-child:after{
			border: none;
		}
	}
</style>